//import 导入 意为 '导入 模块儿 从 react 模块儿导入'
import React,{ Component } from 'react';
import {
  AppRegistry, // 注册APP入口
  StyleSheet, //样式表组件
  Text, //文字组件,它里面只能放文字 类似于 span 标签
  View, //结构组件,它类似于 div 标签
  Image, //引入Image标签
  TextInput, // 引入TextInput组件
  ScrollView // 有滚动条的View
} from 'react-native';

//创建一个 MyApp 组件
class MyApp extends Component{
  aa(){
    alert('如花');
  }

  //  numberOfLines 设置Text组件文字的行数，如果超出此设置的函数，则在行数最后添加...

  render(){
    return(
        //Text组件，专门负责在里面写入文字
        <View style={[styles.wp,styles.bs]}>
          <InputCom />
          <Text onPress={this.aa} numberOfLines={2} style={styles.txtCenter}>数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥数风流人物还看蓝鸥</Text>

          <TxtView />
          <ImageCom />

        </View>
    );
  }
}

//创建一个自定义组件
class TxtView extends Component{
  render(){
    return(
        <View>
          <Text numberOfLines={2}>葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯</Text>
        </View>
    );
  }
}

// 创建一个使用Image的组件
class ImageCom extends Component {
    render() {
        return (
            <View style={styles.imgWp}>
              <Image
                  style={styles.img}
                  resizeMode="contain"
                  source={require('./5.jpg')}
              />
            </View>
        );
    }
}

// 创建一个TextInput组件类
class InputCom extends Component {
    constructor (){
      super();
      this.state = {
        val:'觉悟吧'
      };
    }

    changeVal(str){
      this.setState({
          val:str
      });
    }

    render() {
        return (
            <View>
              <TextInput
                style={styles.input}
                placeholder='为人民服务'
                placeholderTextColor="#0f0"
                returnKeyType="google"
                value={this.state.val}
                onChangeText={this.changeVal.bind(this)}
              />
              <View><Text>{this.state.val}</Text></View>

            </View>
        );
    }
}


//设置样式
const styles = StyleSheet.create({
    wp:{
      marginTop:40,
      borderColor:'#0f0',
      borderWidth:2,
      borderStyle:'dashed',
      justifyContent:'center',
        flex:1
    },
    txtCenter:{
      textAlign:'center',
      backgroundColor:'#ff0',
      flex:1
    },
    bs:{
      borderWidth:5,
      borderColor:'#f00'
    },
    imgWp:{
      width:200,
      height:200
    },
    img:{
      width:200,
      height:200
    },
    input:{
      height:40,
      borderWidth:2,
      borderColor:'#00f',
      borderRadius:2
    }
});


//注册app,其中 'myapp'是指工程名,'MyApp'是创建的组件名
AppRegistry.registerComponent('myapp', () => MyApp);